<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view style="background-color: #F5F5F5;height: 100vh;" v-show="!loadingone">
			<navbar name="购买详情"></navbar>
			<!-- 商品信息 -->
			<view style="width: 100%;background-color: #F5F5F5;padding: 1upx 0upx;">
				<view class="commodity-box">
					<view class="commodity-img">
						<image :src="result.goodsImageUrl" style="width: 185upx;height: 185upx;" mode=""></image>
					</view>
					<view class="right-boxs">
						<view class="titles-box">
							<!-- 健康风险筛查专业版健康风险筛查专业版健康风险筛查专业版 -->
							{{result.goodsName}}
						</view>
						<view class="money-num">
							<text class="money-num-new">¥{{result.goodsSalePrice}}</text>
							<text class="money-num-old">¥{{result.goodsOriginalPrice}}</text>
						</view>
					</view>
				</view>

				<!-- 适用门店 -->
				<view class="suitable-shop">
					<view class="detailed-information ">
						<view class="title-text">
							适用门店
						</view>
						<view class="shop-name">
							<!-- 百岁健康之家（百家湖店） -->
							{{result.storeName}}
						</view>
						<view class="shop-dress">
							<view class="dress-logo-img">
								<image src="https://bsyjk-pic.bsyjk.cn/l/AC3447ACF5AF447686312D6572A7F5F8.png"
									style="width: 22upx;height: 30upx;" mode=""></image>
							</view>
							<view class="dress-text">
								<!-- 南京市 建郝区 双龙大厦 太阳城A4-102 -->
								{{result.address}}
							</view>
						</view>
					</view>
					<view class="navigation-box" @tap="chooseDress">
						<view class="navigation-img">
							<image src="https://bsyjk-pic.bsyjk.cn/l/1DB2EF91E9744A4F82FEB81D30340F79.png"
								style="width: 44upx;height: 44upx;" mode=""></image>
						</view>
						<view class="navigation-text">
							导航
						</view>
						<view class="left-border"></view>
					</view>
				</view>

				<!-- 核验码 -->
				<view class="check-code-box">
					<view class="title-left">
						<view class="title-top">
							核验码
						</view>
						<view class="title-bottom">
							请到店出示此码
						</view>
					</view>
					<view class="number-text" >
						<view style="display: flex;" @tap="showImage(WriteOffSrc)">
							<image style="width: 100rpx;height: 100rpx;" :src="WriteOffSrc"></image>
							<view style="font-size: 24rpx;color: #000;padding-left: 20rpx;line-height: 100rpx;">
								点击放大识别二维码
							</view>
						</view>
						<view style="height: 1px;margin: 10rpx auto;background: #D8D8D8;"></view>
						<view style="display: flex;">
							<view>
								{{result.consumeNo}}
							</view>
							<view type="default" class="number-text-button" @tap="setClipboardData(result.consumeNo)">复制
							</view>
						</view>
					</view>
					<view class="top-circle">
					</view>
					<view class="bottom-circle">
					</view>

					<!-- 已使用  条件渲染 -->
					<view class="been-used">
						<image v-show="result.orderStatus ==2"
							src="http://static.bsyjk.cn/l/BD523EA342CE4CED8819ABA7D00B4859.png"
							style="width: 126upx;height: 92upx;" mode=""></image>
					</view>

				</view>
				<!-- 订单信息 -->
				<view class="order-information">
					<view class="order-titles">
						订单信息
					</view>
					<view style="width: 100%;height: 1rpx; background-color: #D8D8D8;"></view>

					<view class="order-num-box">
						<text class="order-num-text">订单编号：</text>
						<text class="order-nums">{{result.orderNo}}</text>
						<view class="copy-order-num" @tap="setClipboardData(result.orderNo)">
							复制
						</view>
					</view>

					<view class="order-num-box">
						<text class="order-num-text">支付时间：</text>
						<text class="order-nums">{{result.paymentTime}}</text>
					</view>

					<view class="order-num-box">
						<text class="order-num-text">订单价格：</text>
						<text class="order-nums">¥{{result.goodsOriginalPrice}}</text>
					</view>

					<view class="order-num-box">
						<text class="order-num-text">成交价格：</text>
						<text class="order-nums">¥{{result.goodsSalePrice}}</text>
					</view>
					<view class="" style="height: 30upx;"></view>
				</view>
				<!-- 温馨提示 -->
				<view class="warm-prompt-box">
					<view class="warm-prompt-title">
						温馨提示
					</view>
					<view class="warm-prompt-list">
						<text>{{hintList}}</text>
					</view>
					<!-- <view class="warm-prompt-list" v-for="(item,index) in hintList" :key='index'>
						{{item}}
					</view> -->
					<view style="height: 30upx;"></view>
				</view>

				<view style="height: 100upx;"></view>

			</view>

		</view>
		<!-- <canvas style="width: 200px; height: 200px;position: relative;left: -9999px;top:-9999px"
			canvas-id="myQrcode"></canvas> -->
			<view style="position: relative;left: -9999px;top:-9999px">
				<uqrcode ref="uqrcodeCanvas" />
			</view>
	</view>
</template>

<script>


	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"


	export default {
		components: {
			uLoading,
		},
		data() {
			return {
				qrcodeSize: 256,//二维码质量
				loadingone: false, //懒加载动画
				hintList: '', //温馨提示
				result: '', //所有数据
				WriteOffSrc: '',
			}
		},
		onLoad(e) {
			this.orderMd(e.orderId);
			this.reminder(1);
			this.getEwm(e.orderId, 2); //订单号  type = 2 核销订单
		},
		methods: {
			showImage(url) {
				uni.previewImage({
					current: url, // 当前显示图片的http链接
					urls: [url] // 需要预览的图片http链接列表
				})
			},
			getEwm(orderId, type) {
				let _this = this;
				  this.$refs
				    .uqrcodeCanvas
				    .make({
				      mode: 'canvas',
				      size: this.qrcodeSize,
				      text: 'https://baidu.com?orderId=' + orderId + '&type=' + type,
				      drawDelay: 500, // 在安卓上生成失败或异常可以调整延时久一点试试，例如在后面再补个零？实在不行就用view模式，不能设置为300，否则App端canvas.draw不执行，有点奇葩的设定
				      toFileDelay: 500 // 在安卓上生成失败或异常可以调整延时久一点试试，例如在后面再补个零？实在不行就用view模式，不能设置为300，否则App端canvas.draw不执行，有点奇葩的设定
				      // drawDelay: -1, // 不设置延时会使用默认的，设置为-1则为实际的不设置延时
				      // toFileDelay: -1 // 不设置延时会使用默认的，设置为-1则为实际的不设置延时
				    })
				    .then(res => {
				      // 返回的res与uni.canvasToTempFilePath返回一致
				      console.log(res)
				      this.WriteOffSrc = res.tempFilePath
				    }).finally(() => {
						
				    })
			},
			// 获取温馨提示
			reminder(instrType) {
				let _this = this;
				this.$shopnew.get(global.apiUrls.reminder + '?instrType=' + instrType, {})
					.then(res => {
						if (res.data.code == 1000) {
							let hintList = res.data.result.instrDesc[0].content;
							_this.hintList = hintList
						}
					}).catch(err => {})
			},
			//导航
			chooseDress() {
				let latitude = Number(this.result.latitude),
					longitude = Number(this.result.longitude);
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					scale: 18,
					name: this.result.storeName, //门店名称
					address: this.result.address, //详细说明
				})
			},
			setClipboardData(text) {
				uni.setClipboardData({
					data: text,
					success: function(res) {
						// uni.getClipboardData({
						// 	success: function(res) {
						uni.showToast({
							title: '复制成功',
							duration: 1500
						})
						// 	}
						// })
					}
				})
			},
			// 获取详情数据
			orderMd(orderId) {
				this.loadingone = true;
				let _this = this;
				this.$shopnew.get(global.apiUrls.orderMd + '/' + orderId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							_this.result = result;
							_this.loadingone = false;
						}
					}).catch(err => {})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.commodity-box {
		width: 706upx;
		height: 250upx;
		padding: 30upx 24upx;
		border-radius: 24upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30upx;
		margin-left: 22upx;
		background-color: #FFFFFF;

		.commodity-img {
			width: 185upx;
			height: 185upx;
			border-radius: 4upx;
			overflow: hidden;
		}

		.right-boxs {
			width: 450upx;

			.titles-box {
				font-size: 26upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 37upx;
				height: 74upx;

			}

			.money-num {
				margin-top: 84upx;

				.money-num-new {
					font-size: 26upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 37upx;
				}

				.money-num-old {
					font-size: 24upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					text-decoration: line-through;
					line-height: 33upx;
					margin-left: 20upx;
				}
			}
		}
	}

	//适用门店
	.suitable-shop {
		width: 706upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18upx 30upx;
		background-color: #FFFFFF;
		border-radius: 24upx;
		margin-top: 30upx;
		margin-left: 22upx;

		.detailed-information {
			width: 568upx;

			.title-text {
				font-size: 28upx;
				font-weight: 500;
				color: #2EA7E0;
				line-height: 40upx;
			}

			.shop-name {
				font-size: 26upx;
				font-weight: 500;
				color: #333333;
				line-height: 37upx;
				margin-top: 10upx;
			}

			.shop-dress {
				display: flex;
				align-items: center;
				margin-top: 18upx;

				.dress-logo-img {
					width: 20upx;
					height: 30upx;
				}

				.dress-text {
					font-size: 22upx;
					font-family: PingFang-SC-Regular, PingFang-SC;
					font-weight: 400;
					color: #666666;
					line-height: 30upx;
					margin-left: 10upx;
				}
			}
		}

		.navigation-box {
			width: 74upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.left-border {
				width: 1rpx;
				height: 60upx;
				background-color: #E4E3E3;
				position: absolute;
				left: -20upx;
				top: 10upx;
			}

			.navigation-img {
				width: 44upx;
				height: 44upx;
			}

			.navigation-text {
				font-size: 20upx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #4A4A4A;
				line-height: 28upx;
				margin-top: 4upx;
			}
		}
	}

	.check-code-box {
		width: 706upx;
		height: 240upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 24upx;
		padding: 0upx 30upx;
		background-color: #FFFFFF;
		margin-top: 30upx;
		margin-left: 22upx;
		position: relative;

		.been-used {
			position: absolute;
			width: 126upx;
			height: 92upx;
			right: 30upx;
			top: 40upx;
		}

		.top-circle {
			position: absolute;
			width: 44upx;
			height: 44upx;
			border-radius: 22upx;
			background-color: #F5F5F5;
			top: -22upx;
			left: 230upx;
		}

		.bottom-circle {
			position: absolute;
			width: 44upx;
			height: 44upx;
			border-radius: 22upx;
			background-color: #F5F5F5;
			bottom: -22upx;
			left: 230upx;
		}

		.title-left {

			.title-top {
				font-size: 30upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42upx;
			}

			.title-bottom {
				font-size: 24upx;
				font-family: PingFang-SC-Regular, PingFang-SC;
				font-weight: 400;
				color: #666666;
				line-height: 33upx;
			}

		}

		.number-text {
			font-size: 26upx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 37upx;
			min-width: 350upx;

			.number-text-button {
				width: 82rpx;
				height: 32rpx;
				line-height: 32rpx;
				border-radius: 16rpx;
				text-align: center;
				color: #F56767;
				font-size: 20rpx;
				text-decoration: underline;
				background-color: #F5F5F5;
				margin: 10upx 0 0 80upx;

			}
		}
	}

	.order-information {
		width: 706upx;
		margin-top: 30upx;
		margin-left: 22upx;
		border-radius: 24upx;
		padding: 0upx 20upx;
		background-color: #FFFFFF;

		.order-titles {
			width: 100%;
			height: 83upx;
			font-size: 30upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 83upx;
		}

		.order-num-box {
			display: flex;
			align-items: center;
			margin-top: 22upx;

			.order-num-text {
				font-size: 28upx;
				color: #9C9C9C;
			}

			.order-nums {
				font-size: 28upx;
				color: #333333;
			}

			.copy-order-num {
				width: 82upx;
				height: 32upx;
				line-height: 32upx;
				border-radius: 16upx;
				text-align: center;
				color: #F56767;
				font-size: 20upx;
				text-decoration: underline;
				background-color: #F5F5F5;
				margin-left: 18upx;
			}

		}
	}

	.warm-prompt-box {
		background-color: #FFFFFF;
		padding: 1upx 30upx;
		margin-top: 30upx;
		margin-left: 22upx;
		border-radius: 24upx;
		width: 706upx;

		.warm-prompt-title {
			width: 130upx;
			height: 42upx;
			line-height: 42upx;
			background-image: url(http://static.bsyjk.cn/l/2114BA577D774B69895CD37DD27954BA.png);
			background-size: 100% 100%;
			text-align: center;
			font-size: 22upx;
			color: #2EA7E0;
			margin-top: 36upx;
		}

		.warm-prompt-list {
			font-size: 22upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4A4A4A;
			line-height: 39upx;
			margin-top: 21upx;
		}


	}
</style>
